<md-dialog class="task-dialog" aria-label="New Task">
    <form name="taskForm" class="md-inline-form" novalidate>
        <md-toolbar class="md-accent md-hue-2">
            <div class="md-toolbar-tools" layout="row" layout-align="space-between">
                <span class="title">{{vm.title}}</span>
                <md-button class="md-icon-button" ng-click="vm.closeDialog()">
                    <md-icon md-font-icon="icon-close" aria-label="Close dialog"></md-icon>
                </md-button>
            </div>
        </md-toolbar>

        <md-dialog-content ms-scroll>
            <md-input-container class="md-block">
                <label translate="TODO.TITLE">Title</label>
                <input name="title" ng-model="vm.task.title" required>
                <div ng-messages="taskForm.title.$error" ng-show="taskForm.title.$touched" role="alert">
                    <div ng-message="required">
                        <span translate="TODO.ERRORS.TITLE_REQUIRED">Title field is required</span>
                    </div>
                </div>
            </md-input-container>

            <div class="tags">
                <label translate="TODO.TAGS">Tags</label>
                <md-chips ng-model="vm.task.tags" md-transform-chip="vm.newTag($chip)">
                    <md-chip-template>
                        <span ng-if="$chip.color" class="color" ng-style="{'background-color':$chip.color}"></span>
                        <span>{{$chip.label}}</span>
                    </md-chip-template>
                </md-chips>
            </div>

            <div layout-xs="column" layout="row">
                <div flex class="date-container">
                    <label translate="TODO.START_DATE">Start Date</label>
                    <md-datepicker flex ng-model="vm.task.startDate" md-placeholder="Start Date"></md-datepicker>
                </div>

                <div flex class="date-container">
                    <label translate="TODO.DUE_DATE">Due Date</label>
                    <md-datepicker flex ng-model="vm.task.dueDate" md-placeholder="Due Date"></md-datepicker>
                </div>
            </div>

            <div class="notes">
                <label translate="TODO.NOTES">Notes</label>
                <text-angular ng-model="vm.task.notes"></text-angular>
            </div>

            <div class="attachment-list">
                <div class="attachment" layout="row" layout-align="space-between center">
                    <div>
                        <span class="filename">attachment-2.doc</span>
                        <span class="size">(12 Kb)</span>
                    </div>

                    <md-button class="md-icon-button">
                        <md-icon md-font-icon="icon-close" aria-label="delete attachment" class="s16"></md-icon>
                    </md-button>
                </div>

                <div class="attachment" layout="row" layout-align="space-between center">
                    <div>
                        <span class="filename">attachment-1.jpg</span>
                        <span class="size">(350 Kb)</span>
                    </div>

                    <md-button class="md-icon-button" aria-label="Delete attachment" translate
                               translate-attr-aria-label="TODO.DELETE_ATTACHMENT">
                        <md-icon md-font-icon="icon-close" class="s16"></md-icon>
                    </md-button>
                </div>
            </div>
        </md-dialog-content>

        <md-dialog-actions layout="row" layout-align="space-between center">
            <div layout="row" layout-align="start center">
                <md-button type="submit" ng-if="!vm.newTask" ng-click="vm.saveTask()"
                           class="send-button md-accent md-raised"
                           ng-disabled="taskForm.$invalid || taskForm.$pristine"
                           aria-label="SAVE" translate="TODO.SAVE" translate-attr-aria-label="TODO.SAVE">
                    SAVE
                </md-button>

                <md-button type="submit" ng-if="vm.newTask" ng-click="vm.addNewTask()"
                           class="send-button md-accent md-raised"
                           ng-disabled="taskForm.$invalid || taskForm.$pristine"
                           aria-label="Add Task" translate="TODO.ADD_TASK" translate-attr-aria-label="TODO.ADD_TASK">
                    ADD TASK
                </md-button>

                <md-button class="md-icon-button" aria-label="Attach file" translate
                           translate-attr-aria-label="TODO.ATTACH_FILE">
                    <md-icon md-font-icon="icon-paperclip"></md-icon>
                </md-button>

                <md-button class="md-icon-button" aria-label="Insert picture" translate
                           translate-attr-aria-label="TODO.INSERT_PICTURE">
                    <md-icon md-font-icon="icon-file-image-box"></md-icon>
                </md-button>
            </div>

            <div layout="row">
                <md-button class="md-icon-button" ng-click="vm.deleteTask($event)" aria-label="Delete" translate
                           translate-attr-aria-label="TODO.DELETE">
                    <md-icon md-font-icon="icon-delete"></md-icon>
                    <md-tooltip><span translate="TODO.DELETE">DELETE</span></md-tooltip>
                </md-button>
            </div>
        </md-dialog-actions>
    </form>
</md-dialog>